import React, { PureComponent } from 'react';
import _ from 'lodash';
import { TableC } from '../../../../comps';
import { connect } from 'dva';
import color from '../../../../css/colors';
import config from '../../../../comps/business/tradingMarket/config.js';
@connect(({ OTCOptionContractsMonitoringM }) => ({ OTCOptionContractsMonitoringM }))
export default class OTCOptionLifeCycleTable extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {},
      loading: false,
    };
  }
  componentDidMount() {
    const { searchObj } = this.props;
    this.getData({
      ...searchObj,
      numInPage: 10,
      currentPage: 1,
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchObj) !== JSON.stringify(this.props.searchObj)) {
      this.getData({
        ...nextProps.searchObj,
        numInPage: 10,
        currentPage: 1,
      });
    }
  }
  //表格分页
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.getData({
      ...this.props.searchObj,
      numInPage: pageSize,
      currentPage: current,
    });
  };

  // 获取数据
  getData = (searchObj) => {
    this.setState({
      loading: true,
    });
    const params =
      searchObj.istrigger == ' '
        ? {
            numInPage: searchObj.numInPage,
            currentPage: searchObj.currentPage,
            day: searchObj.day,
          }
        : {
            numInPage: searchObj.numInPage,
            currentPage: searchObj.currentPage,
            day: searchObj.day,
            istrigger: searchObj.istrigger,
          };

    this.props.dispatch({
      type: 'OTCOptionContractsMonitoringM/queryOtcOptionMonitorList',
      payload: {
        ...params,
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            tableData: data.data,
            loading: false,
          });
        } else {
          this.setState({
            tableData: {},
            loading: false,
          });
        }
      },
    });
  };

  render() {
    const { tableData = {}, loading } = this.state;
    const { columns = [], dataSource = [], pageInfo = {} } = tableData;
    const newColums = columns.map((x) => {
      x.width = 120;
      if (x.key === 'newprice' || x.key === 'barrier') {
        return {
          ...x,
          width: 120,
          type: 'money',
        };
      }
      if (x.key === 'volatility' || x.key === 'knockGap') {
        return {
          ...x,
          width: 120,
          type: 'rate',
        };
      }
      if (x.key === 'day') {
        return {
          ...x,
          width: 100,
          type: 'number',
        };
      }

      if (x.key === 'isTrigger') {
        return {
          ...x,
          width: 100,
          onCell: (record, rowIndex) => {
            if (record.isTrigger === '是') {
              return {
                style: {
                  background: color.debtAndProfit.area[0],
                },
              };
            } else {
              return;
            }
          },
        };
      }
      if (x.key === 'knockExpectHorizon') {
        return {
          ...x,
          width: 140,
          onCell: (record, rowIndex) => {
            if (record.datetype == 1) {
              return {
                style: {
                  background: color.debtAndProfit.area[0],
                },
              };
            } else {
              return;
            }
          },
        };
      }

      if (x.key == 'underlying') {
        x.width = 180;
        x.render = (val, data) => {
          let exchange = config.filter((item) => {
            return item.value == data.exchangeCode;
          });
          return data.tradingCode + '-' + data.secuabbr + '-' + exchange[0]?.title;
        };
      }
      if (x.key == 'productName') {
        x.width = 180;
      }
      return x;
    });
    return (
      <div style={{ marginTop: '20px' }}>
        <TableC
          columns={newColums}
          dataSource={dataSource}
          current={Number(pageInfo.currentPage)}
          pageSize={pageInfo.numInPage}
          total={pageInfo.total}
          scroll={{ x: 'max-content' }}
          rowKey='key1'
          selfScrollY={true}
          loading={loading}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}
